<template>
  <view class="resume-email">
    <!-- 标题 -->
    <view class="title">接收简历邮箱</view>

    <!-- 提示信息 -->
    <view class="tip">
      已设置的接收简历邮箱不支持清空
    </view>

	<view class="email-title">邮箱</view>

    <!-- 邮箱输入 -->
    <view class="input-section">
      <input class="email-input" type="email" v-model="email" placeholder="请输入邮箱" />
    </view>

    <!-- 验证码输入 -->
    <view class="input-section">
      <input class="code-input" type="number" v-model="verificationCode" placeholder="请输入验证码" />
      <view class="get-code" @click="getVerificationCode">
        <text>{{ codeButtonText }}</text>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="confirm-button" @click="confirmEmail">
      <text>确认</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      email: "", // 邮箱
      verificationCode: "", // 验证码
      codeButtonText: "获取验证码", // 验证码按钮文字
      countdown: 60, // 倒计时
      timer: null, // 定时器
    };
  },
  methods: {
    // 获取验证码
    getVerificationCode() {
      if (!this.email) {
        uni.showToast({
          title: "请输入邮箱",
          icon: "none",
        });
        return;
      }

      // 模拟发送验证码
      uni.showToast({
        title: "验证码已发送",
        icon: "none",
      });

      // 开始倒计时
      this.startCountdown();
    },
    // 开始倒计时
    startCountdown() {
      if (this.timer) clearInterval(this.timer);
      this.codeButtonText = `${this.countdown}秒后重试`;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.codeButtonText = "获取验证码";
          this.countdown = 60;
        } else {
          this.codeButtonText = `${this.countdown}秒后重试`;
        }
      }, 1000);
    },
    // 确认邮箱
    confirmEmail() {
      if (!this.email) {
        uni.showToast({
          title: "请输入邮箱",
          icon: "none",
        });
        return;
      }
      if (!this.verificationCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }

      // 模拟确认成功
      uni.showToast({
        title: "确认成功",
        icon: "success",
      });

      // 这里可以添加确认逻辑，例如调用 API 确认邮箱
    },
  },
};
</script>

<style scoped>
.resume-email {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.email-title{
	color: #666;
	font-size: 12px;
	margin-bottom: 10px;
}

.input-section {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}

.email-input,
.code-input {
  flex: 1;
  height: 40px;
  font-size: 16px;
  color: #333;
}

.get-code {
  margin-left: 10px;
  padding: 10px;
  cursor: pointer;
}

.get-code text {
  font-size: 14px;
  color: #2F318B;
}

.confirm-button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

</style>